<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head> 
<title>${type=='save'?'添加':'修改' }管理员</title>
<%@ include file="../common/base.jsp" %>

	<style>
		.uploader{
		position:relative;
		display:inline-block;
		overflow:hidden;
		cursor:default;
		padding:0;
		margin:10px 0px;
		-moz-box-shadow:0px 0px 5px #ddd;
		-webkit-box-shadow:0px 0px 5px #ddd;
		box-shadow:0px 0px 5px #ddd;

		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
	}

	.filename{
		float:left;
		display:inline-block;
		outline:0 none;
		height:32px;
		width:180px;
		margin:0;
		padding:8px 10px;
		overflow:hidden;
		cursor:default;
		border:1px solid;
		border-right:0;
		font:9pt/100% Arial, Helvetica, sans-serif; color:#777;
		text-shadow:1px 1px 0px #fff;
		text-overflow:ellipsis;
		white-space:nowrap;

		-moz-border-radius:5px 0px 0px 5px;
		-webkit-border-radius:5px 0px 0px 5px;
		border-radius:5px 0px 0px 5px;

		background:#f5f5f5;
		background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);
		border-color:#ccc;

		-moz-box-shadow:0px 0px 1px #fff inset;
		-webkit-box-shadow:0px 0px 1px #fff inset;
		box-shadow:0px 0px 1px #fff inset;

		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}

	.button{
		float:left;
		height:32px;
		display:inline-block;
		outline:0 none;
		padding:8px 12px;
		margin:0;
		cursor:pointer;
		border:1px solid;
		font:bold 9pt/100% Arial, Helvetica, sans-serif;

		-moz-border-radius:0px 5px 5px 0px;
		-webkit-border-radius:0px 5px 5px 0px;
		border-radius:0px 5px 5px 0px;

		-moz-box-shadow:0px 0px 1px #fff inset;
		-webkit-box-shadow:0px 0px 1px #fff inset;
		box-shadow:0px 0px 1px #fff inset;
	}


	.uploader input[type=file]{
		position:absolute;
		top:0; right:0; bottom:0;
		border:0;
		padding:0; margin:0;
		height:30px;
		cursor:pointer;
		filter:alpha(opacity=0);
		-moz-opacity:0;
		-khtml-opacity: 0;
		opacity:0;
	}

	/* White Color Scheme ------------------------ */

	.white .button{
		color:#555;
		text-shadow:1px 1px 0px #fff;
		background:#ddd;
		background:-moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0);
		border-color:#ccc;
	}

	.white:hover .button{
		background:#eee;
		background:-moz-linear-gradient(top, #dddddd 0%, #eeeeee 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#eeeeee));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0);
	}

	/* Blue Color Scheme ------------------------ */

	.blue .button{
		color:#fff;
		text-shadow:1px 1px 0px #09365f;
		background:#064884;
		background:-moz-linear-gradient(top, #3b75b4 0%, #064884 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b75b4), color-stop(100%,#064884));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0);
		border-color:#09365f;
	}

	.blue:hover .button{
		background:#3b75b4;
		background:-moz-linear-gradient(top, #064884 0%, #3b75b4 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#064884), color-stop(100%,#3b75b4));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4',GradientType=0);
	}

	/* Green Color Scheme ------------------------ */

	.green .button{
		color:#fff;
		text-shadow:1px 1px 0px #6b7735;
		background:#7d8f33;
		background:-moz-linear-gradient(top, #93aa4c 0%, #7d8f33 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#93aa4c), color-stop(100%,#7d8f33));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0);
		border-color:#6b7735;
	}

	.green:hover .button{
		background:#93aa4c;
		background:-moz-linear-gradient(top, #7d8f33 0%, #93aa4c 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d8f33), color-stop(100%,#93aa4c));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0);
	}

	/* Red Color Scheme ------------------------ */

	.red .button{
		color:#fff;
		text-shadow:1px 1px 0px #7e0238;
		background:#90013f;
		background:-moz-linear-gradient(top, #b42364 0%, #90013f 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b42364), color-stop(100%,#90013f));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0);
		border-color:#7e0238;
	}

	.red:hover .button{
		background:#b42364;
		background:-moz-linear-gradient(top, #90013f 0%, #b42364 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#90013f), color-stop(100%,#b42364));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0);
	}

	/* Orange Color Scheme ------------------------ */

	.orange .button{
		color:#fff;
		text-shadow:1px 1px 0px #c04501;
		background:#d54d01;
		background:-moz-linear-gradient(top, #f86c1f 0%, #d54d01 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f86c1f), color-stop(100%,#d54d01));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0);
		border-color:#c04501;
	}

	.orange:hover .button{
		background:#f86c1f;
		background:-moz-linear-gradient(top, #d54d01 0%, #f86c1f 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d54d01), color-stop(100%,#f86c1f));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0);
	}

	/* Black Color Scheme ------------------------ */

	.black .button{
		color:#fff;
		text-shadow:1px 1px 0px #111111;
		background:#222222;
		background:-moz-linear-gradient(top, #444444 0%, #222222 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0);
		border-color:#111111;
	}

	.black:hover .button{
		background:#444444;
		background:-moz-linear-gradient(top, #222222 0%, #444444 100%);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444444));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0);
	}</style>
	<script>
	$(function(){
        $("input[type=file]").change(function(){

            var filepath=$(this).val();
            var extStart=filepath.lastIndexOf(".");
            var ext=filepath.substring(extStart,filepath.length).toUpperCase();
            if(ext!=".BMP" && ext!=".PNG" && ext!=".GIF" && ext!=".JPG" && ext!=".JPEG"){
                prompt.alert("文件图片，图片限于png,gif,jpeg,jpg格式");
                return false;
            }
            $(this).parents(".uploader").find(".filename").val($(this).val());
            $("#saveButton").removeAttr('onclick');//去掉a标签中的onclick事件
            $.ajaxFileUpload({
                type:'post',
                url : "http://127.0.0.1:9091/upload/uploadFile?fileType=7",
                fileElementId : "file",
                dataType: 'json',
                success : function(data, status) {
                    var json = JSON.parse(JSON.stringify(data));
                    if(json.c == 0){
                        $("#productUrl").val(json.d.fileUrl);
                        $("#saveButton").addAttr('onclick',"save();");//添加上a标签中的onclick事件
                    }else{
                        prompt.alert(json.m);
                    }
                },
                error : function(data, status, e) {
                    var json = JSON.stringify(data);
                    prompt.alert(json.m);
                }
            });

        });
        $("input[type=file]").each(function(){
            if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("请选择图片文件...");}
        });
    });

    function productsIdBlur(focusFlag) {
        var id = $("#id").val();
        var reg = new RegExp("^[0-9][0-9]*$");

        if (id == null || id.length < 1 || !reg.test(id)) {
            prompt.alert("输入错误，请输入数字编码！");
            if (focusFlag) {
                locationFocus("id");
            }
            return false;
        } else {
            var flag = false;
            $.ajax({
                url: "product/validateProductsId",
                type: "POST",
                async: false,
                data: {id: id},
                success: function (data, status) {
                    //处理提示
                    var obj = eval(data);
                    if (data.key == 1) {
                        prompt.alert("产品ID已存在！");
                        if (focusFlag) {
                            locationFocus("id");
                        }
                    } else if (data.key == 2) {
                        prompt.alert("后台系统错误，请稍后再试");
                        if (focusFlag) {
                            locationFocus("id");
                        }
                    } else {
                        flag = true;
                    }
                }, error: function (data, status, e) {
                    prompt.alert("后台系统错误，请稍后再试");
                    if (focusFlag) {
                        locationFocus("id");
                    }
                }
            });
            return flag;

        }
    }
	</script>
</head>

<body id="body">
<!--head-->
<div id="head">
	<%@ include file="../common/head.jsp" %>
</div>
<!--head end-->
<!--container-->
<div id="container">
	<div id="pageId" style="display: none;">02-01-01</div>
		<!--sidebar-->
		<%@ include file="../common/menu.jsp" %>
	    <!--sidebar-->
    <!--main-->
    <div class="main">
    	<div class="location" style="background-position:22px -109px;">
			平台管理<span>&gt;</span>产品管理<span>&gt;</span>${type=='save'?'添加':'修改' }产品信息
        </div>
        <!--content-->
        <div class="content">
        	<h2 class="tit_blue">${type=='save'?'添加':'修改' }产品(带<span class="red">*</span>号为必填字段)</h2>
            <div class="inputInfoList3">
                <ul>
					<li>
						<input type="hidden" id="type" name="type" value="${loginUserType }">
						<c:if test="${type=='save'}">
							<label>产品编码</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
													  class="text" id="id" name="id"
													  onBlur="productsIdBlur();this.style.border = '1px solid #D5D5D5'">
							<span class='red'>*</span>
						</c:if>
						<c:if test="${type=='update'}">
							<label>产品编码</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
													  onBlur="this.style.border = '1px solid #D5D5D5'" readonly="readonly" class="text"
													  id="id" name="id" value="${productDTO.id }">
						</c:if>
					</li>
                    <li>
                    	<input type="hidden" id="type" name="type" value="${loginUserType }">
                    	<c:if test="${type=='save'}">
                    		<label>产品名称</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
													  class="text" id="productName" name="productName"
													  onBlur="verify_String('productName','产品名称');this.style.border = '1px solid #D5D5D5'">
                    		<span class='red'>*</span>
                    	</c:if>
                    	<c:if test="${type=='update'}">
	                        <label>产品名称</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
													  onBlur="this.style.border = '1px solid #D5D5D5'" readonly="readonly" class="text"
													  id="productName" name="productName" value="${productDTO.productName }">
                    	</c:if>
                    </li>
                    <li>
                   		<label>产品价格</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
												  class="text" id="productPrice" value="${productDTO.productPrice }"
												  onBlur="verify_Number('productPrice','产品价格');this.style.border = '1px solid #D5D5D5'">
                   		<span class='red'>*</span>
                    </li>
					<li>
						<label>产品总保价</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
												   class="text" id="safeMoney" value="${productDTO.safeMoney }"
												   onBlur="verify_Number('safeMoney','产品总保价');this.style.border = '1px solid #D5D5D5'">
						<span class='red'>*</span>
					</li>
					<li>
						<label>产品总保件数</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
												   class="text" id="safeCount" value="${productDTO.safeCount }"
												   onBlur="verify_Number('safeCount','产品总保件数');this.style.border = '1px solid #D5D5D5'">
						<span class='red'>*</span>
					</li>
					<li>
						<label>产品总保次数</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
													class="text" id="userCount" value="${productDTO.userCount }"
													onBlur="verify_Number('userCount','产品总保次数');this.style.border = '1px solid #D5D5D5'">
						<span class='red'>*</span>
					</li>
					<li>
						<label>产品服务年数</label><input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"
													class="text" id="serviceTime" value="${productDTO.serviceTime }"
													onBlur="verify_Number('serviceTime','产品服务年数');this.style.border = '1px solid #D5D5D5'">
						<span class='red'>*</span>
					</li>
					<li>
						<label>产品图片</label>
						<div class="uploader green">
							<input type="hidden" id="productUrl" name="productUrl"/>
							<input type="text" class="filename"  readonly/>
							<input type="button" name="file" class="button" value="选择图片"/>
							<input type="file" id="file" name="file" size="30"/>
						</div>
					</li>
					<li>
						<label>产品描述</label><textarea id="productDesc" name="productDesc">${productDTO.productDesc}</textarea>
					</li>
                </ul>
                <div class="button_wrap button_wrap2">
                	<a href="javascript:;" onClick="save();" id="saveButton">保存</a>
                	<c:if test="${type=='save' }">
	                    <a href="javascript:;" onClick="reset();">重置</a>
                	</c:if>
                </div>
            </div>
        </div>
        <!--content-->
        <!--foot-->
        <div id="foot">
        	<p>北京兴宝合和科技有限公司  提供技术支持</p>
        </div>
        <!--foot-->
    </div>
    <!--main-->
</div>
<!--container-->
<script src="${pageContext.request.contextPath}/static/js/basic.js"></script>
<script type="text/javascript">

	function fileUpload(){
	    var filepath=$("#productFile").val();
        var extStart=filepath.lastIndexOf(".");
        var ext=filepath.substring(extStart,filepath.length).toUpperCase();
        if(ext!=".BMP" && ext!=".PNG" && ext!=".GIF" && ext!=".JPG" && ext!=".JPEG"){
            prompt.alert("文件图片，图片限于png,gif,jpeg,jpg格式");
            return false;
        }

        $("#saveButton").removeAttr('onclick');//去掉a标签中的onclick事件
        $.ajaxFileUpload({
            type:'post',
            url : "http://127.0.0.1:9090/upload/uploadFile?fileType=7",
            fileElementId : "productFile",
            dataType: 'json',
            success : function(data, status) {
                alert(data);
                var json = JSON.stringify(data);
                alert(json);
                if(json.c == 0){
                    $("#productUrl").val(json.data.fileUrl);
                    $("#saveButton").addAttr('onclick');//去掉a标签中的onclick事件
				}else{
                    prompt.alert(json.m);
				}
            },
            error : function(data, status, e) {
                var json = JSON.stringify(data);
                prompt.alert(json.m);
            }
        })
	}

//获取form表单所有参数
function getParams(){
	var json = {};
	$(".content input,.content select,.content textarea").each(function(i,e){
		json[$(e).attr("id")] = $(e).attr("value");
	});
	return json;
}

//重置表单
function reset(){
	$(".inputInfoList3 input").each(function(i,e){
			$(e).val("");
	});
	//重置select
	initSelect();
	//重置提示
	$(".s_tips,.e_tips").each(function(i,e){
		$(e).remove();
	});
}

//保存操作员
function save(){
    if(!productsIdBlur(true)){ return false;}
    if(!verify_String('productName','产品名称')){ return false;}
    if(!verify_Number('productPrice','产品价格')){ return false;}
    if(!verify_Number('safeMoney','产品总保价')){ return false;}
    if(!verify_Number('safeCount','产品总保件数')){ return false;}
    if(!verify_Number('userCount','产品总保次数')){ return false;}
    if(!verify_Number('serviceTime','产品服务年数')){ return false;}


	$.ajax({
		   type: "POST",
		   url: "${pageContext.request.contextPath}/product/saveOrUpdateProduct?type=${type}",
		   dataType:"json",
		   data:getParams(),
		   success: function(data){
		   		prompt.alert(data.msg,function(){
		   			if (data.errorCode=="0") {
						window.location.href="product/showProduct";
					}
		   		});
		   }
	});
	
}

</script>
</body>
</html>